<template>
  <div>
    <el-dialog :title="addInfo.isAdd ? '添加秒杀' : '编辑秒杀'" :visible.sync="addInfo.isShow" :before-close="cancel" center>
      <el-form :model="seckInfo" :rules="rules" ref="seckInfo">
        <el-form-item label="活动名称" :label-width="formLabelWidth" prop="title">
          <el-input v-model="seckInfo.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动期限" :label-width="formLabelWidth">
          <!--日期时间插架 -->
          <el-date-picker v-model="timer" type="datetimerange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="一级分类" :label-width="formLabelWidth" prop="first_cateid">
          <el-select @change="changeCate(false)" v-model="seckInfo.first_cateid" placeholder="请选择">
            <el-option v-for="item in catelist" :key="item.id" :value="item.id" :label="item.catename"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类" :label-width="formLabelWidth" prop="second_cateid">
          <el-select @change="changeSecond(false)" v-model="seckInfo.second_cateid" placeholder="请选择">
            <el-option v-for="item in secondCate" :key="item.id" :value="item.id" :label="item.catename"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品" :label-width="formLabelWidth">
          <el-select v-model="seckInfo.goodsid" placeholder="请选择">
            <el-option v-for="item in goodsArr" :key="item.id" :value="item.id" :label="item.goodsname"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch v-model="seckInfo.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
            :inactive-value="2">
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">添 加</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
//引入封装好的接口
import {
  seckadd,
  seckinfo,
  seckedit,
  goodslist,
} from "../../request/api";
import { mapActions, mapGetters } from "vuex";
export default {
  props: ["addInfo"],
  data() {
    return {
      seckInfo: {
        title: "", //秒杀名称
        begintime: "", //开始时间
        endtime: "", //结束时间
        first_cateid: "", //商品一级分类编号
        second_cateid: "", //商品二级分类编号
        goodsid: "", //商品编号
        status: 1, //状态1正常2禁用
      },
      formLabelWidth: "120px", //label宽度
      //关泽验证
      rules: {
        title: [
          { required: true, message: "请输入秒杀名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
      },
      timer: null, //日期的双向数据绑定值
      secondCate: [], //二级分类数组
      goodsArr: [], //商品列表
    }
  },

  computed: {
    ...mapGetters({
      catelist: "cate/getCteList",
    }),

  },

  methods: {
    ...mapActions({
      getSeckList: "seck/getSeckAction",
      changeCateAction: "cate/changeCateAction",
    }),
    //封装一个切换一级渲染二级的事件
    changeCate(n) {
      let index = this.catelist.findIndex(
        (item) => item.id == this.seckInfo.first_cateid
      );
      this.secondCate = this.catelist[index].children;
      if (!n) {
        //清空二级分类内容
        this.seckInfo.second_cateid = "";
        //清空商品列表
        this.seckInfo.goodsid = "";
      }
    },
    //封装一个切换二级渲染商品列表事件
    changeSecond(n) {
      //调用商品列表接口
      goodslist({
        fid: this.seckInfo.first_cateid,
        sid: this.seckInfo.second_cateid,
      }).then((res) => {
        console.log(res, "商品列表");
        this.goodsArr = res.list ? res.list : [];
        if (!n) {
          this.seckInfo.goodsid = "";
        }
      });
    },
    //封装一个取消事件
    cancel() {
      //去改变父组件的isShow的状态
      this.$emit("cancel", false);
      //调取清空事件
      this.reset();
    },
    //封装一个清空事件
    reset() {
      this.seckInfo = {
        title: "", //秒杀名称
        begintime: "", //开始时间
        endtime: "", //结束时间
        first_cateid: "", //商品一级分类编号
        second_cateid: "", //商品二级分类编号
        goodsid: "", //商品编号
        status: 1, //状态1正常2禁用
      };
      //调用清空验证的方法
      this.$refs.seckInfo.resetFields();
      //清空日期时间插件
      this.timer = null;
    },
    //封装一个查询一条数据的接口
    lookup(id) {
      seckinfo({ id }).then((res) => {
        // console.log(res,'一条数据');
        if (res.code == 200) {
          this.seckInfo = res.list;
          this.seckInfo.id = id;
          this.timer = [
            new Date(parseInt(this.seckInfo.begintime)),
            new Date(parseInt(this.seckInfo.endtime)),
          ];
          this.changeCate(true)
          this.changeSecond(true)
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 确定事件
    confirm() {
      this.$refs.seckInfo.validate((valid) => {
        if (valid) {
          this.seckInfo.begintime = new Date(this.timer[0]).getTime();
          this.seckInfo.endtime = new Date(this.timer[1]).getTime();
          console.log(this.seckInfo, "表单对象");
          if (this.addInfo.isAdd) {
            seckadd(this.seckInfo).then((res) => {
              if (res.code == 200) {
                this.$message.success(res.msg);
                this.cancel();
                this.getSeckList();
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            seckedit(this.seckInfo).then((res) => {
              if (res.code == 200) {
                this.$message.success(res.msg);
                // //确定之后，调用关闭弹框并清空
                this.cancel();
                //重新调用接口
                this.getSeckList();
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        } else {
          this.$message.error("验证失败");
          return false;
        }
      });
    },

  },

  mounted() {
    //组件一加载触发分类行动
    this.changeCateAction();
  },
}
</script>
<style lang="">
  
</style>